<template>

  <el-container>
    <el-header class="header">

      <LayoutHeader></LayoutHeader>

    </el-header>
    <el-container class="containerWrapper">
      <el-aside width="200px " class="aside">

        <NavMenu />

      </el-aside>
      <el-main class="main">

        <!--        <router-view></router-view>-->
        <RouterView></RouterView>
        <!-- 返回顶部 -->
        <el-backtop :right="100" :bottom="100" />
      </el-main>
    </el-container>
  </el-container>




</template>

<script setup name="Home">
import NavMenu from '@/components/NavMenu.vue';
import LayoutHeader from '@/components/LayoutHeader.vue';
</script>

<style scoped>
/*参考样式： https://demo.orangeforms.com/#/main/welcome*/
.header {
  /*background-color: #6C6F6F;*/
  /*color: white;*/
  line-height: 60px;
}


.containerWrapper {
  height: calc(100vh - 60px);
}

.aside {
  background-color: #545C64;

}


main {
  background-color: #ECF5FF;
  box-shadow: inset 0  8px 10px grey;

}
</style>
